<template>
  <footer class="footer">
    <div class="footer-box">
      <div class="footer-box-l">
        <ul>
          <li><a href="//qiye.imooc.com" target="_blank">企业服务</a></li>
          <li><a href="/index/sitemap.html" target="_blank">网站地图</a></li>
          <li><a href="//www.imooc.com/" target="_blank">网站首页</a></li>
          <li><a href="/about/us" target="_blank">关于我们</a></li>
          <li><a href="/about/contact" target="_blank">联系我们</a></li>
          <li><a href="/seek/masters" target="_blank">讲师招募</a></li>
          <li><a href="/help" target="_blank">帮助中心</a></li>
          <li><a href="/user/feedback" target="_blank">意见反馈</a></li>

          <li><a href="https://git.imooc.com" target="_blank">代码托管</a></li>
        </ul>
        <p>
          Copyright
          <svg class="icon" aria-hidden="true" style="font-size: 15px">
            <use xlink:href="#icon-copyright1"></use>
          </svg>
          2025 imooc.com All Rights Reserved |
          <a
            rel="nofollow"
            href="https://beian.miit.gov.cn/"
            style="color: #93999f"
            target="_blank"
            >京ICP备12003892号-11</a
          >
          <a
            rel="nofollow"
            href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010802030151"
            style="color: #93999f; margin: 0 5px"
            target="_blank"
          >
            <svg class="icon" aria-hidden="true" style="font-size: 15px">
              <use xlink:href="#icon-gongan"></use>
            </svg>
            京公网安备11010802030151号
          </a>
        </p>
      </div>
      <div class="footer-box-r">
        <ul>
          <li>
            <el-popover
              :width="300"
              popper-style="box-shadow: rgb(14 18 22 / 35%) 0px 10px 38px -10px, rgb(14 18 22 / 20%) 0px 10px 20px -15px; padding: 20px;"
            >
              <template #reference>
                <svg class="icon" aria-hidden="true" style="font-size: 35px">
                  <use xlink:href="#icon-shoucang-"></use>
                </svg>
              </template>
              <template #default>
                <div
                  class="demo-rich-conent"
                  style="display: flex; align-items: center"
                >
                  <p>
                    <svg
                      class="icon"
                      aria-hidden="true"
                      style="font-size: 25px"
                    >
                      <use xlink:href="#icon-shoucang-"></use>
                    </svg>
                  </p>

                  <p class="demo-rich-content__desc" style="margin-left: 5px">
                    使用
                    <b style="font-size: 16px; color: #dd3a5f"> Ctrl+D </b>
                    可将网站添加到书签
                  </p>
                </div>
              </template>
            </el-popover>
          </li>
          <li>
            <svg class="icon" aria-hidden="true" style="font-size: 35px">
              <use xlink:href="#icon-weixin-copy"></use>
            </svg>
          </li>
          <li>
            <svg class="icon" aria-hidden="true" style="font-size: 32px">
              <use xlink:href="#icon-QQ-"></use>
            </svg>
          </li>
          <li>
            <el-tooltip
              content="Bottom center"
              placement="bottom"
              effect="light"
            >
              <svg class="icon" aria-hidden="true" style="font-size: 32px">
                <use xlink:href="#icon-weibo-copy"></use>
              </svg>
            </el-tooltip>
          </li>
        </ul>
      </div>
    </div>
  </footer>
</template>

<script setup lang="ts">
import "//at.alicdn.com/t/c/font_4835794_7khcr86gs97.js";
</script>

<style scoped lang="less">
footer {
  background: #fff;
  border-top: 1px solid #f3f5f6;
  font-size: 12px;
  color: #93999f;
  padding: 36px 0;
  min-width: 620px;
  position: relative;
  z-index: 21;
  font-weight: 300;

  .footer-box {
    width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-around;
    align-items: center;
    .footer-box-l {
      display: flex;
      flex-direction: column;
      ul {
        display: flex;
        li {
          margin-right: 27px;
          text-align: center;
          font-size: 14px;
          a {
            color: #545c63;
          }
        }
      }
      p {
        margin-top: 8px;
      }
    }
    .footer-box-r {
      display: flex;
      justify-content: center;
      align-items: center;
      ul {
        display: flex;
        margin-top: -15px;
        li {
          margin-right: 20px;
          opacity: 0.7;
          &:hover {
            opacity: 1;
          }
        }
      }
    }
  }
}
</style>
